<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>邀请成员</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
		<link href="/resources/src/css/add-role.css" rel="stylesheet">
		
	</head>
	<body class="sticky-header left-side-collapsed" style="background-color:#EFF0F4;">
		<jsp:include page="../common/left-slide.jsp" flush="true">
	        <jsp:param name="pageHeader" value="userHeader" />
	    </jsp:include>
		<div class="main-content">
			<jsp:include page="../common/header-start.jsp" />
        	<div class="row scroll-range" style="margin-right:0; margin-left:0;">
               	<%-- <jsp:include page="user-manage-left.jsp" /> --%>
                <div class="right-box text-center no-padding">
					<div class="row right-header text-left" style="margin-left:0;margin-right:0;">
						<div class="title"><span>邀请成员</span></div>	
					</div>
					
					<!--正文内容-->
					<div class="content inviteRole" style="padding-right:15px;">
						<div class="container-full">
							<div class="header text-left">
								<div class="clearfix">
									<div class="header-cell"><span>请填写手机号码：</span>
										<input type="text" id="phone" placeholder="请填写手机"/><i class="iconfont icon-youxiang-copy"></i>
									</div>
									<div class="header-cell select-role" style="margin-top:30px;"><span>选择角色：</span>
										<input type="text" id="select-role"    placeholder="请选择角色"/><i class="iconfont icon-control-arr-copy-copy"></i>
										<div class="options-menu">
											<input type="hidden" id="roleType" value="" />
											<ul class="options-items">
												<c:forEach items="${roleList }" var="role">
													<li class="options" value="${role.id }">${role.name }</li>
												</c:forEach>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<!--button group-->
							<div class="button-group text-left" style="margin-left:96px;">
								<!--<button type="button" class="btn btn-cancel">取消</button>-->
								<button type="button" class="btn btn-confirm" id="sendInvite" style="height:40px; line-height:40px;">确认</button>
							</div>
						</div>
					</div>
                </div>
           </div>
       </div>
	    <script src="/resources/src/js/jquery-1.9.1.min.js"></script>
	    <script src="/resources/src/js/jquery.nicescroll.js"></script>
	    <script src="/resources/src/js/main.js"></script>
	    <script src="/resources/src/js/invite-role.js"></script>
	</body>
</html>